<template>
  <div class="container1">
    <div class="header left">
      <div class="left nav">
        <ul>
          <li class="nav_active" @click="handletabnaviga(1)">
            <i class="nav_1"></i><a>报警管理</a>
          </li>
          <li @click="handletabnaviga(2)">
            <i class="nav_2"></i><a>报警分析</a>
          </li>
          <li @click="handletabnaviga(3)">
            <i class="nav_3"></i><a>用电分析</a>
          </li>
          <li @click="handletabnaviga(4)">
            <i class="nav_4"></i><a>操作日志</a>
          </li>
        </ul>
      </div>
      <div class="header_center left" style="position: relative">
        <h2><strong>厦门城市职业学院智慧用电管理平台</strong></h2>
      </div>
      <div class="header_right right" style="position: relative">
        <h4>
          {{ NowTime }}
          <span class="padding_10 bg-purple_num" @click="handlefullScreen">{{
            fullscreenName
          }}</span>
        </h4>
      </div>
    </div>
    <div class="con left">
      <!--数据总概-->
      <!-- <div class="con_div">
        <div class="con_div_text left">
          <div class="con_div_text01 left">
            <img src="../images/info_1.png" class="left text01_img" />
            <div class="left text01_div">
              <p>总采集数据量(G)</p>
              <p>1235</p>
            </div>
          </div>
          <div class="con_div_text01 right">
            <img src="../images/info_2.png" class="left text01_img" />
            <div class="left text01_div">
              <p>当月采集数据量(G)</p>
              <p>235</p>
            </div>
          </div>
        </div>
        <div class="con_div_text left">
          <div class="con_div_text01 left">
            <img src="../images/info_3.png" class="left text01_img" />
            <div class="left text01_div">
              <p>总门诊数(人)</p>
              <p class="sky">12356</p>
            </div>
          </div>
          <div class="con_div_text01 right">
            <img src="../images/info_4.png" class="left text01_img" />
            <div class="left text01_div">
              <p>当月门诊数(人)</p>
              <p class="sky">12356</p>
            </div>
          </div>
        </div>
        <div class="con_div_text left">
          <div class="con_div_text01 left">
            <img src="../images/info_5.png" class="left text01_img" />
            <div class="left text01_div">
              <p>总住院数(人)</p>
              <p class="org">12356</p>
            </div>
          </div>
          <div class="con_div_text01 right">
            <img src="../images/info_6.png" class="left text01_img" />
            <div class="left text01_div">
              <p>当月住院数(人)</p>
              <p class="org">12356</p>
            </div>
          </div>
        </div>
      </div> -->
      <!--统计分析图-->
      <div class="div_any">
        <div class="left div_any01">
          <div class="div_any_child">
            <div class="div_any_title">
              <!-- <img src="../images/title_1.png" /> -->
              设备数量
            </div>
            <div class="display_flex3 justifycontent">
              <div>
                <ul class="xm_cszs padding20">
                  <li class="fontSize14">
                    <span>设备总数:</span><span>{{ deviceCount.sumDevice }}</span>
                  </li>
                  <li class="fontSize14">
                    <span>智能断路器:</span><span>{{ deviceCount.sumSwitch }}</span>
                  </li>
                  <li class="fontSize14">
                    <span>智能烟感:</span><span>{{ deviceCount.sumIotSmoke }}</span>
                  </li>
                </ul>
                <div class="img_div_text padding020 fontSize16">用电占比</div>
              </div>
              <p ref="pieChart1" class="p_chart"></p>
            </div>
            <div>
              <ul class="xm_cszs padding020">
                <li class="fontSize14">
                  <span>用电最多楼层：</span><span class="colorblue2">
                    {{ mostElectricity.areaName }}</span>
                </li>
                <li class="fontSize14">
                  <span>当前总用电量：</span><span class="colorblue2">
                    {{ mostElectricity.electricitySumToday }}kwh</span>
                </li>
                <li class="fontSize14">
                  <span>用电最少楼层：</span><span class="colorblue2">
                    {{ electricityLeast.areaName }}</span>
                </li>
                <li class="fontSize14">
                  <span>当前总用电量：</span><span class="colorblue2">{{ electricityLeast.electricitySumToday }}kwh</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="div_any_child">
            <div class="div_any_title">
              <!-- <img src="../images/title_2.png" /> -->
              在线率
            </div>
            <div class="display_flex3 paddingtop_30 marginleft20">
              <div class="fontSize16 colorfff flex1">
                在线
                <span class="colorblue">{{ deviceCount.sumDeviceOnline }}</span>
              </div>
              <div class="fontSize16 colorfff flex1">
                离线
                <span class="color999">{{
                  Number(deviceCount.sumDevice) -
                  Number(deviceCount.sumDeviceOnline)
                }}</span>
              </div>
              <div class="fontSize16 colorfff flex1">
                在线率
                <span class="colorblue" v-if="deviceCount.sumDevice != 0">{{ deviceCount.DeviceOnline }}%</span>
                <span class="colorblue" v-else>100%</span>
              </div>
            </div>
            <div class="display_flex3 paddingtop_30 marginleft20">
              <div class="fontSize14 colorfff flex1">
                今日用电 <span>{{ compareElectricity.todaySum }}</span>
              </div>
              <div class="fontSize14 colorfff flex1">
                昨日同期 <span>{{ compareElectricity.lastDaySum }}</span>
              </div>
            </div>
            <div class="display_flex3 paddingtop_30 marginleft20">
              <div class="fontSize14 colorfff flex1">
                用电趋势
                <span :class="compareElectricity.tendencyElectricityday > 0
                  ? 'red'
                  : 'coloryellow'
                  ">{{
    (
      Number(compareElectricity.todaySum) -
      Number(compareElectricity.lastDaySum)
    ).toFixed(2)
  }}</span><span class="red icon-search mr10"
                  v-if="compareElectricity.tendencyElectricityday > 0">↑</span>
                <span class="coloryellow icon-search" v-else>↓</span>
                <span :class="compareElectricity.tendencyElectricityday > 0
                  ? 'red'
                  : 'coloryellow ' + 'icon-search'
                  ">{{
    Number(
      compareElectricity.tendencyElectricityday || 0 * 0.01
    ).toFixed(2)
  }}%</span>
              </div>
            </div>
            <div class="display_flex3 paddingtop_30 marginleft20">
              <div class="fontSize14 colorfff flex1">
                本周用电 <span>{{ compareElectricity.thisMonthSum }}</span>
              </div>
              <div class="fontSize14 colorfff flex1">
                上周同期 <span>{{ compareElectricity.lastMonthSum }}</span>
              </div>
            </div>
            <div class="display_flex3 paddingtop_30 marginleft20">
              <div class="fontSize14 colorfff flex1">
                用电趋势
                <span :class="compareElectricity.tendencyElectricityMonth > 0
                  ? 'red'
                  : 'coloryellow'
                  ">{{
    (
      Number(compareElectricity.thisMonthSum) -
      Number(compareElectricity.lastMonthSum)
    ).toFixed(2)
  }}</span><span class="red icon-search mr10"
                  v-if="compareElectricity.tendencyElectricityMonth > 0">↑</span>
                <span class="coloryellow icon-search" v-else>↓</span><span :class="compareElectricity.tendencyElectricityMonth > 0
                  ? 'red'
                  : 'coloryellow ' + 'icon-search'
                  ">{{
    Number(
      compareElectricity.tendencyElectricityMonth || 0 * 0.01
    ).toFixed(2)
  }}%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="div_any02 left">
          <div class="div_any_child div_height">
            <div class="div_any_title">地图中心</div>
            <div v-if="showMap" id="mapChart" style="
                            width: 93.5%;
                            height: 96%;
                            display: inline-block;
                            padding-left: 1.25%;
                            padding-right: 1.25%;
                            padding-top: 2.2%;
                            margin-top: 4%;
                            margin-left: 2%;
                          "></div>
            <div class="fullScreen selectBack">
              <el-radio-group v-model="selectAll" @change="handleRadio" class="display_flex3 justifycontent">
                <el-radio label="2" size="large">报警</el-radio>
                <el-radio label="1" size="large">全部</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="right div_any04">
          <div class="div_any_child02" v-for="(item, index) in buildingElectricityList" :key="index">
            <div class="div_any_title" style="width: 48%">
              {{ item.buildingName }}
            </div>
            <p :id="'lineChart' + index" class="line_Chart bg-purple_num" @click="handleCurve(item)"></p>
          </div>
        </div>
      </div>
      <div class="div_any">
        <div class="left div_any01">
          <div class="div_any_child div_any_child_height">
            <div class="div_any_title">
              <!-- <img src="../images/title_2.png" /> -->
              报警类型统计
            </div>
            <div class="display_flex3 paddingtop_30 marginleft20">
              <div class="fontSize16 colorfff flex1">
                安全分析
                <span class="colorblue">{{ alarmSum.allAlarmNum }}</span>
              </div>
              <div class="fontSize16 colorfff flex1">
                监控分析
                <span class="fontSize12">过去{{
                  Number(alarmSum.thisYearDate) -
                  Number(alarmSum.alarmDateNum)
                }}天无报警</span>
              </div>
            </div>
            <div class="display_flex3 paddingtop_20 marginleft20">
              <!-- <div class="fontSize14 colorfff flex1">
                过压原因 <span class="fontSize12">电压不稳定</span>
              </div> -->
              <div class="fontSize14 colorfff flex1">
                当前运行状况
                <span :class="alarmInfo.length == 0
                      ? 'coloryellow '
                      : 'red ' + ' fontSize12'
                    ">{{ alarmInfo.length == 0 ? "健康" : "报警" }}</span>
              </div>
            </div>
            <!-- <div class="display_flex3 paddingtop_20 marginleft20">
              <div class="fontSize14 colorfff flex1">
                失压原因 <span class="fontSize12">设备安装调试</span>
              </div>
            </div> -->
            <p ref="alarmTypeChart" class="alarmType_Chart"></p>
          </div>
        </div>
        <div class="left div_any05">
          <div class="div_any_child div_any_child_height">
            <div class="div_any_title">
              <!-- <img src="../images/title_2.png" /> -->
              用电设备实时电气参数值
            </div>
            <el-table :data="tableData" :header-cell-style="{ color: '#fff', fontSize: '12px' }" :cell-style="{
              color: '#fff',
              backgroundColor: '#081832',
              fontSize: '12px',
            }" :row-style="{
  color: '#fff',
  backgroundColor: '#081832',
  fontSize: '12px',
}" class="el_table">
              <el-table-column prop="name" label="序号">
                <template #default="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="syncTime" label="同步时间" />

              <el-table-column prop="building" label="楼栋" />
              <el-table-column prop="floor" label="楼层" />
              <el-table-column prop="description" label="电器名称" />
              <el-table-column prop="syncIrms" label="电流(A)" />
              <el-table-column prop="syncPower" label="功率（W）" />
              <el-table-column prop="lockState" label="锁定状态">
                <template #default="scope">
                  <span>{{
                    scope.row.lockState == 0
                    ? "正常"
                    : scope.row.lockState == 1
                      ? "本地锁定"
                      : scope.row.lockState == 2
                        ? "远程锁定"
                        : "本地锁定和远程锁定"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="devState" label="开关状态">
                <template #default="scope">
                  <span>{{
                    scope.row.devState == 0
                    ? "合闸"
                    : scope.row.devState == 1
                      ? "分闸"
                      : ""
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <!-- 弹窗 -->
      <echart-Curve v-if="showCurve" @handleClose="handleCloseTotalEnergy" :echart_curve="showCurve"
        :regionElectricity="regionElectricity" :echarts_name="buildingName"></echart-Curve>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import AMapLoader from "@amap/amap-jsapi-loader"; //高德地图
import { nextTick, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import echartCurve from "../../components/echart_many_curve.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import parsing from "../../assets/js/parsing";
import { getAMapLoader2 } from "../../assets/js/dictionaries";
import api from "../../api/api";
var map, projectobj, marker, createInfoWindow;
var pieChartOption = {
  title: {
    text: "",
    subtext: "",
    left: "center",
  },
  grid: {
    x: "2%", //距离左边
    x2: "2%", //距离右边
    y: "2%", // 上距离
    y2: "2%", // 下距离
    containLabel: true,
  },
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: "50%",
      data: [],
      label: {
        normal: {
          show: true,
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        emphasis: {
          show: false,
        },
      },
    },
  ],
};
var alarmTypeOption = {
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "line", // 默认为直线，可选为：'line' | 'shadow'
      label: {},
    },
  },

  grid: {
    x: "5%", //距离左边
    x2: "5%", //距离右边
    y: "15%", // 上距离
    y2: "2%", // 下距离
    containLabel: true,
  },

  dataZoom: [
    //添加横线滚动条
    {
      start: 0, //默认为0
      end: 15, //默认为100
      type: "slider",
      show: true,
      xAxisIndex: [0],
      startValue: 10,
      handleSize: 0, //滑动条的 左右2个滑动条的大小
      height: 5, //组件高度
      left: 20, //左边的距离
      right: 20, //右边的距离
      bottom: 5, //右边的距离
      handleColor: "#CBBCDB", //h滑动图标的颜色
      handleStyle: {
        borderColor: "#CBBCDB",
        borderWidth: "1",
        shadowBlur: 2,
        background: "#CBBCDB",
        shadowColor: "#CBBCDB",
      },
      backgroundColor: "rgba(37, 46, 100, 0.45)", //两边未选中的滑动条区域的颜色
      showDataShadow: false, //是否显示数据阴影 默认auto
      showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
      filterMode: "empty", // 当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
      zoomLock: true,
      showDetail: false, // 是否显示detail，即拖拽时候显示详细数值信息。
      handleIcon:
        "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
      filterMode: "filter",
    },
  ],
  formatter: function (params) {
    var texts = "";
    texts += params[0].name + "<br>" + params[0].value;
    return texts;
  },
  xAxis: {
    type: "category",
    splitLine: { show: false },
    data: [],
    // axisLabel: {
    //   interval: 0,
    //   show: true,
    //   textStyle: {
    //     color: "#fff",
    //   },
    // },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      interval: 0,
      formatter: function (params) {
        var newParamsName = ""; // 最终拼接成的字符串
        var paramsNameNumber = params.length; // 实际标签的个数
        var provideNumber = 6; // 每行能显示的字的个数
        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        if (paramsNameNumber > provideNumber) {
          /** 循环每一行,p表示行 */
          for (var p = 0; p < rowNumber; p++) {
            var tempStr = ""; // 表示每一次截取的字符串
            var start = p * provideNumber; // 开始截取的位置
            var end = start + provideNumber; // 结束截取的位置
            // 此处特殊处理最后一行的索引值
            if (p == rowNumber - 1) {
              // 最后一次不换行
              tempStr = params.substring(start, paramsNameNumber);
            } else {
              // 每一次拼接字符串并换行
              tempStr = params.substring(start, end) + "\n\n";
            }
            newParamsName += tempStr; // 最终拼成的字符串
          }
        } else {
          // 将旧标签的值赋给新标签
          newParamsName = params;
        }
        //将最终的字符串返回
        return newParamsName;
      },
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
  },
  series: [
    {
      name: "总电量",
      type: "bar",
      stack: "总电量",
      label: {
        show: true,
        position: "top",
      },
      data: [900, 345, 393, "-", "-", 135, 178, 286, "-", "-", "-"],
      barWidth: 25,
      barGap: 1,
      itemStyle: {
        //柱状图上方显示数值
        normal: {
          color: "#0d6ece",
          label: {
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              color: "#fff",
              fontSize: 12,
            },
          },
        },
      },
    },
  ],
};
let lineOption = {
  grid: {
    x: "2%", //距离左边
    x2: "2%", //距离右边
    y: "5%", // 上距离
    y2: "2%", // 下距离
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
  },
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
      label: {
        normal: {
          show: false,
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        emphasis: {
          show: false,
        },
      },
    },
  ],
};
export default {
  components: {
    echartCurve,
  },
  setup(prop, context) {
    const projectId = Number(localStorage.getItem("projectId"));
    projectobj = JSON.parse(localStorage.getItem("projectobj"));
    let center_lng = projectobj.lng == 0 ? "116.428147" : projectobj.lng;
    let center_lat = projectobj.lat == 0 ? "39.929257" : projectobj.lat;
    if (center_lng == 0 || !center_lng || center_lat == 0 || !center_lat) {
      center_lng = "116.428147";
      center_lat = "39.929257";
    }
    const log_lat = ref([center_lng, center_lat]);
    let title,
      content = [];
    const NowTime = ref(parsing.getNowTime());
    setInterval(function () {
      NowTime.value = parsing.getNowTime();
    }, 1000);
    const AMap_value = ref();
    const mapList = ref([
      {
        lat: 39.90923,
        lng: 116.397428,
        Q: 39.90923,
        R: 116.39742799999999,
      },
      {
        lat: 39.92923,
        lng: 116.317428,
        Q: 39.92923,
        R: 116.31742899999999,
      },
      {
        lat: 39.93923,
        lng: 116.337428,
        Q: 39.93923,
        R: 116.33742899999999,
      },
    ]);
    const tableData = ref([]);
    const router = useRouter();
    const pieChart1 = ref(null);
    const alarmTypeChart = ref(null);
    const showCurve = ref(false);
    const buildingElectricityList = ref([]);
    const buildList = ref([{}, {}, {}, {}, {}, {}]);
    const compareElectricity = ref({});
    const deviceCount = ref({});
    const buildingElectricityToday = ref([]);
    const alarmTypeSums = ref([]);
    const alarmSum = ref({});
    const selectAll = ref("2");
    const showMap = ref(false);
    const indexData = ref();
    const mapInfoList = ref([]);
    onMounted(async () => {
      let barChart = echarts.init(pieChart1.value);
      let alarmChart = echarts.init(alarmTypeChart.value);
      setTimeout(function () {
        //设备数量 饼状图
        for (var i = 0; i < buildingElectricityToday.value.length; i++) {
          buildingElectricityToday.value[i].value =
            buildingElectricityToday.value[i].electricitySumToday;
          buildingElectricityToday.value[i].name =
            buildingElectricityToday.value[i].areaName;
        }
        pieChartOption.series[0].data = buildingElectricityToday.value;
        barChart.setOption(pieChartOption);
        window.addEventListener("resize", function () {
          barChart.resize();
        });
        // 报警类型 柱状图
        const alarmTypeSumsX = [];
        const alarmTypeSumsY = [];
        for (var i = 0; i < alarmTypeSums.value.length; i++) {
          alarmTypeSumsX.push(alarmTypeSums.value[i].alarmTypeName);
          alarmTypeSumsY.push(alarmTypeSums.value[i].alarmNum);
        }
        alarmTypeOption.series[0].data = alarmTypeSumsY;
        alarmTypeOption.xAxis.data = alarmTypeSumsX;
        alarmChart.setOption(alarmTypeOption);
        window.addEventListener("resize", function () {
          //自适应大小, 不用的话不会自适应大小。
          alarmChart.resize();
        });
      }, 1000);

      setTimeout(function () {
        for (let i = 0; i < buildingElectricityList.value.length; i++) {
          // console.log(buildingElectricityList.value[i]);
          let chart = document.getElementById("lineChart" + i);
          let echartOption = echarts.init(chart);
          lineOption.xAxis.data =
            buildingElectricityList.value[i].buildingElectricityX;
          lineOption.series[0].data =
            buildingElectricityList.value[i].buildingElectricityY;
          echartOption.setOption(lineOption);
          window.addEventListener("resize", function () {
            echartOption.resize();
          });
        }
      }, 1000);
    });

    const bd_decrypt = (bd_lng, bd_lat) => {
      var X_PI = (Math.PI * 3000.0) / 180.0;
      var x = bd_lng - 0.0065;
      var y = bd_lat - 0.006;
      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
      var gg_lng = z * Math.cos(theta);
      var gg_lat = z * Math.sin(theta);
      var lnglat = [gg_lng, gg_lat];
      return lnglat;
    };
    const getMap = (AMap, log_lat) => {
      map = new AMap.Map("mapChart", {
        zoom: projectobj.mapLevel ? projectobj.mapLevel : 0, //级别
        center: log_lat, //中心点坐标
        viewMode: "3D", //使用3D视图
      });
      map.clearInfoWindow();
    };
    const alarmInfo = ref([]);
    const mostElectricity = ref({
      areaName: "",
      electricitySumToday: 0,
    });
    const electricityLeast = ref({
      areaName: "",
      electricitySumToday: 0,
    });
    // 获取表格数据
    const getData = () => {
      showMap.value = true;
      api
        .getListAPI("backup/indexData?projectId=" + projectId, {})
        .then((res) => {
          if (res.data.code == 1) {
            var lnglat = [];
            let compareEle = res.data.data.compareElectricity;

            // 月份用电趋势
            if (compareEle.lastMonthSum != 0) {
              compareEle.tendencyElectricityMonth =
                (parsing.accSub(
                  Number(compareEle.thisMonthSum),
                  Number(compareEle.lastMonthSum)
                ) /
                  Number(compareEle.lastMonthSum)) *
                100;
            } else if (
              compareEle.thisMonthSum == 0 &&
              compareEle.lastMonthSum == 0
            ) {
              compareEle.tendencyElectricityMonth = 0;
            } else {
              compareEle.tendencyElectricityMonth = 100;
            }
            if (compareEle.lastDaySum != 0) {
              // 日用电趋势
              compareEle.tendencyElectricityday =
                (parsing.accSub(
                  Number(compareEle.todaySum),
                  Number(compareEle.lastDaySum)
                ) /
                  Number(compareEle.lastDaySum)) *
                100;
            } else if (compareEle.todaySum == 0 && compareEle.lastDaySum == 0) {
              compareEle.tendencyElectricityday = 0;
            } else {
              compareEle.tendencyElectricityday = 100;
            }

            // console.log(compareEle);
            compareElectricity.value = compareEle;
            deviceCount.value = res.data.data.deviceCount;
            // 在线率
            if (deviceCount.value.sumDevice != 0) {
              deviceCount.value.DeviceOnline = parsing.mul(
                (
                  deviceCount.value.sumDeviceOnline /
                  deviceCount.value.sumDevice
                ).toFixed(3),
                100
              );
            }
            for (var i = 0; i < res.data.data.alarmInfo.length; i++) {
              if (res.data.data.alarmInfo[i].alarmState == 1) {
                if (res.data.data.alarmInfo[i].alarmLevel == 1) {
                  res.data.data.alarmInfo[i].style = 0;
                } else if (res.data.data.alarmInfo[i].alarmLevel == 2) {
                  res.data.data.alarmInfo[i].style = 1;
                } else if (res.data.data.alarmInfo[i].alarmLevel == 3) {
                  res.data.data.alarmInfo[i].style = 2;
                } else if (res.data.data.alarmInfo[i].alarmLevel == 4) {
                  res.data.data.alarmInfo[i].style = 3;
                }
              } else {
                res.data.data.alarmInfo[i].style = 4;
              }

              var lnglat = bd_decrypt(
                res.data.data.alarmInfo[i].lng,
                res.data.data.alarmInfo[i].lat
              );

              res.data.data.alarmInfo[i].lnglat = lnglat.map(function (item) {
                return item - 0;
              });
              console.log(res.data.data.alarmInfo[i].lnglat);
              res.data.data.alarmInfo[i].address =
                res.data.data.alarmInfo[i].province +
                res.data.data.alarmInfo[i].city +
                res.data.data.alarmInfo[i].branchOffice +
                res.data.data.alarmInfo[i].building;
            }
            let buildingElectricity = res.data.data.buildingElectricity;
            if (buildingElectricity.length < 4) {
              if (buildingElectricity.length < 3) {
                buildingElectricity.push({}, {}, {});
              } else if (buildingElectricity.length < 2) {
                buildingElectricity.push({}, {}, {});
              } else if (buildingElectricity.length < 1) {
                buildingElectricity.push({}, {}, {}, {});
              }
            } else {
              for (var i = 0; i < buildingElectricity.length; i++) {
                buildingElectricity[i].buildingElectricityY = [];
                buildingElectricity[i].buildingElectricityX = [];
                for (
                  var j = 0;
                  j < buildingElectricity[i].electricityHourlySums.length;
                  j++
                ) {
                  buildingElectricity[i].buildingElectricityY.push(
                    buildingElectricity[i].electricityHourlySums[j]
                      .electricityRecord
                  );
                  buildingElectricity[i].buildingElectricityX.push(
                    buildingElectricity[i].electricityHourlySums[j].sumHour
                  );
                }
              }
            }
            buildingElectricityList.value = buildingElectricity;
            // 用电最多楼层
            if (res.data.data.buildingElectricityToday.length > 0) {
              mostElectricity.value =
                res.data.data.buildingElectricityToday[
                res.data.data.buildingElectricityToday.length - 1
                ];
              // 用电量最少
              electricityLeast.value =
                res.data.data.buildingElectricityToday[0];
              buildingElectricityToday.value =
                res.data.data.buildingElectricityToday;
            }
            alarmTypeSums.value = res.data.data.alarmTypeSums;
            alarmSum.value = res.data.data.alarmSum;
            // console.log(buildingElectricityList.value);
            alarmInfo.value = res.data.data.alarmInfo;
            indexData.value = res.data.data;
            getAllAlarm();
            getAMapLoader();
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getData();
    const getSwitchDataList = () => {
      api
        .getListAPI(
          "backup/indexData/switchDataList?projectId=" + projectId,
          {}
        )
        .then((res) => {
          if (res.data.code == 1) {
            tableData.value = res.data.data;
          }
        });
    };
    getSwitchDataList();
    const getMassMark = (citys, AMap, map) => {
      console.log(citys);
      const style = [
        {
          url: "../../src/assets/img/mark_1.png", //红色
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(18, 30),
        },
        {
          url: "../../src/assets/img/mark_2.png", //黄色
          anchor: new AMap.Pixel(4, 4),
          size: new AMap.Size(18, 30),
        },
        {
          url: "../../src/assets/img/mark_3.png", //蓝色
          anchor: new AMap.Pixel(3, 3),
          size: new AMap.Size(18, 30),
        },
        {
          url: "../../src/assets/img/mark_4.png", //灰色
          anchor: new AMap.Pixel(3, 3),
          size: new AMap.Size(18, 30),
        },
        {
          url: "../../src/assets/img/mark_5.png", //绿色
          anchor: new AMap.Pixel(3, 3),
          size: new AMap.Size(18, 30),
        },
      ];
      var mass = new AMap.MassMarks(citys, {
        opacity: 0.8,
        zIndex: 111,
        cursor: "pointer",
        style: style,
      });
      marker = new AMap.Marker({ content: " ", map: map });
      createInfoWindow = (title, content) => {
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";
        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // info.style.background = "#4e546a";
        info.style.color = "#fff";
        info.style.padding = "10px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        top.style.display = "flex";
        closeX.className = "info-img";
        closeX.style.width = "17px";
        closeX.style.position = "absolute";
        closeX.style.right = "20px";
        // closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;
        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        // middle.style.backgroundColor = "#4e546a";
        middle.style.position = "relative";
        middle.style.marginTop = "20px";
        middle.innerHTML = content;
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = "relative";
        bottom.style.top = "0px";
        bottom.style.margin = "0 auto";
        bottom.style.color = "#2261e5";
        bottom.onclick = handle_details;
        bottom.innerHTML = "详情";
        // info.appendChild(bottom);
        return info;
      };
      const getpopu = (obj) => {
        var province = obj.province || "";
        var city = obj.city || "";
        var office = obj.office || "";
        var branchOffice = obj.branchOffice || "";
        var building = obj.building || "";
        var floor = obj.floor || "";
        var roomNum = obj.roomNum || "";
        var alarmState = obj.alarmTypeName || "正常";
        content = [];
        if (selectAll.value == 1) {
          content.push("单位：" + obj.address);
        } else {
          content.push(
            "单位：" +
            province +
            city +
            office +
            branchOffice +
            building +
            floor +
            roomNum
          );
        }

        content.push("设备名称：" + obj.deviceName);
        var color_value = "";
        if (obj.alarmState == 0) {
          color_value = "#54ed52";
        } else {
          if (obj.alarmLevel == 1) {
            color_value = "red";
          } else if (obj.alarmLevel == 2) {
            color_value = "rgb(224 200 24)";
          } else if (obj.alarmLevel == 3) {
            color_value = "rgb(51 127 222)";
          } else if (obj.alarmLevel == 4) {
            color_value = "rgb(156 157 158)";
          }
        }
        content.push(
          "<span style='color:" +
          color_value +
          "'>状态：" +
          alarmState +
          "</span>"
        );
      };
      const flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      if (flag) {
        // 移动端打开
        mass.on("click", function (e) {
          marker.setPosition(e.data.lnglat);
          getpopu(e.data);
          var infoWindow = new AMap.InfoWindow({
            // isCustom: true, //使用自定义窗体
            content: createInfoWindow(title, content.join("<br/>")),
            // offset: new AMap.Pixel(16, -45),
          });
          infoWindow.open(map, marker.getPosition());
        });
      } else {
        // PC端打开
        mass.on("mouseover", function (e) {
          map.clearInfoWindow();
          marker.setPosition(e.data.lnglat);
          getpopu(e.data);
          var infoWindow = new AMap.InfoWindow({
            // isCustom: true, //使用自定义窗体
            content: createInfoWindow(title, content.join("<br/>")),
            // offset: new AMap.Pixel(16, -45),
          });
          infoWindow.open(map, marker.getPosition());
        });
        mass.on("mouseout", function (e) {
          map.clearInfoWindow();
        });
      }
      mass.setMap(map);
    };

    const fullscreen = ref(context.attrs.fullscreen);
    // console.log(context.attrs.fullscreen);
    const fullscreenName = ref("查看全屏");
    // 是否包含左侧菜单
    const ismenu = ref(context.attrs.ismenu);
    let element = document.documentElement;
    if (!ismenu.value) {
      if (fullscreen.value) {
        fullscreenName.value = "查看全屏";
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        fullscreenName.value = "退出全屏";
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
    }
    const handlefullScreen = () => {
      fullscreen.value = !fullscreen.value;
      context.emit("handlefullScreen", fullscreen.value);
      if (!ismenu.value) {
        let element = document.documentElement;
        if (fullscreen.value) {
          fullscreenName.value = "查看全屏";
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          fullscreenName.value = "退出全屏";
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        fullscreen.value = !fullscreen.value;
      }
    };
    const regionElectricity = ref([]);
    const buildingName = ref("");
    const handleCurve = (item) => {
      api
        .getListAPI("backup/indexData/regionElectricityHourly", {
          areaCode: item.areaCode,
        })
        .then((res) => {
          // console.log(res);
          if (res.data.code == 1) {
            regionElectricity.value = res.data.data;
            showCurve.value = true;
            buildingName.value = item.buildingName;
          }
        });
    };
    const handleCloseTotalEnergy = () => {
      showCurve.value = false;
    };
    const handletabnaviga = (index) => {
      if (index == 1) {
        router.push("./alarmMgt");
      } else if (index == 2) {
        router.push("./statisticAnalysis?activeName=" + "third");
      } else if (index == 3) {
        router.push("./statisticAnalysis");
      } else if (index == 4) {
        router.push("./logMgt");
      }
    };
    const closeInfoWindow = () => {
      map.clearInfoWindow();
    };
    const handle_details = () => {
      // router.push("/alarm_detail");
    };
    const getAMapLoader = () => {
      getAMapLoader2().then((AMap) => {
        getMap(AMap, log_lat.value);
        AMap_value.value = AMap;
        getMassMark(mapInfoList.value, AMap, map);
      })
      // AMapLoader.reset();
      // AMapLoader.load({
      //   key: "e6a43aa4581d0cb826ce01fb6f3c7eae", // 申请好的Web端开发者Key，首次调用 load 时必填
      //   version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      //   plugins: ['AMap.Map', 'AMap.ControlBar', 'AMap.ToolBar'],
      //   Loca: {
      //     // 是否加载 Loca， 缺省不加载
      //     version: "2.0.0", // Loca 版本，缺省 1.3.2
      //   },
      // })
      //   .then((AMap) => {
      //     getMap(AMap, log_lat.value);
      //     AMap_value.value = AMap;
      //     getMassMark(mapInfoList.value, AMap, map);
      //   })
      //   .catch((e) => {
      //     ElMessage.error(e.message);
      //   });
    };
    const getAllEquipment = () => {
      mapInfoList.value = [];
      let lngLatInfo = indexData.value.lngLatInfo;
      if (lngLatInfo.arcExtinguishing.length > 0) {
        for (var i = 0; i < lngLatInfo.arcExtinguishing.length; i++) {
          lngLatInfo.arcExtinguishing[i].style = 4;
          lngLatInfo.arcExtinguishing[i].alarmLevel = 3;
          var lnglat = bd_decrypt(
            lngLatInfo.arcExtinguishing[i].lng,
            lngLatInfo.arcExtinguishing[i].lat
          );
          lngLatInfo.arcExtinguishing[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
        }
      }
      if (lngLatInfo.arcFault.length > 0) {
        for (var i = 0; i < lngLatInfo.arcFault.length; i++) {
          lngLatInfo.arcFault[i].style = 4;
          lngLatInfo.arcFault[i].alarmLevel = 3;
          var lnglat = bd_decrypt(
            lngLatInfo.arcFault[i].lng,
            lngLatInfo.arcFault[i].lat
          );
          lngLatInfo.arcFault[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
        }
      }
      if (lngLatInfo.monitor.length > 0) {
        for (var i = 0; i < lngLatInfo.monitor.length; i++) {
          lngLatInfo.monitor[i].style = 4;
          lngLatInfo.monitor[i].alarmLevel = 3;
          var lnglat = bd_decrypt(
            lngLatInfo.monitor[i].lng,
            lngLatInfo.monitor[i].lat
          );
          lngLatInfo.monitor[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
        }
      }
      if (lngLatInfo.rtuInfo.length > 0) {
        for (var i = 0; i < lngLatInfo.rtuInfo.length; i++) {
          lngLatInfo.rtuInfo[i].style = 4;
          lngLatInfo.rtuInfo[i].alarmLevel = 3;
          var lnglat = [lngLatInfo.rtuInfo[i].lng, lngLatInfo.rtuInfo[i].lat];
          lngLatInfo.rtuInfo[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
          lngLatInfo.rtuInfo[i].address =
            lngLatInfo.rtuInfo[i].building +
            lngLatInfo.rtuInfo[i].floor +
            lngLatInfo.rtuInfo[i].roomNum;
          lngLatInfo.rtuInfo[i].deviceName = lngLatInfo.rtuInfo[i].rtuName;
        }
      }
      //  10001 粒子计数器  10002 温湿度传感器  10003 烟感
      if (lngLatInfo.iotDevice && lngLatInfo.iotDevice.length > 0) {
        for (var i = 0; i < lngLatInfo.iotDevice.length; i++) {
          lngLatInfo.iotDevice[i].style = 4;
          lngLatInfo.iotDevice[i].alarmLevel = 3;
          var lnglat = [
            lngLatInfo.iotDevice[i].lng,
            lngLatInfo.iotDevice[i].lat,
          ];
          lngLatInfo.iotDevice[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
          lngLatInfo.iotDevice[i].address =
            lngLatInfo.iotDevice[i].building +
            lngLatInfo.iotDevice[i].floor +
            lngLatInfo.iotDevice[i].roomNum;
          lngLatInfo.iotDevice[i].deviceName =
            lngLatInfo.iotDevice[i].devType == 10001
              ? "粒子计数器"
              : lngLatInfo.iotDevice[i].devType == 10002
                ? "温湿度传感器"
                : lngLatInfo.iotDevice[i].devType == 10003
                  ? "烟感"
                  : "";
        }
      }
      var e = [];
      var a = e.concat(indexData.value.alarmInfo);
      var b = a.concat(lngLatInfo.arcExtinguishing);
      var c = b.concat(lngLatInfo.arcFault);
      var d = c.concat(lngLatInfo.monitor);
      var e = d.concat(lngLatInfo.iotDevice);
      mapInfoList.value = e.concat(lngLatInfo.rtuInfo);
      console.log(mapInfoList.value);
    };
    const getAllAlarm = () => {
      mapInfoList.value = [];
      var e = [];
      mapInfoList.value = e.concat(indexData.value.alarmInfo);
    };
    const handleRadio = (e) => {
      showMap.value = false;
      if (e == 1) {
        getAllEquipment();
        setTimeout(function () {
          showMap.value = true;
          getAMapLoader();
        }, 300);
      } else {
        getAllAlarm();
        setTimeout(function () {
          showMap.value = true;
          getAMapLoader();
        }, 300);
      }
    };
    return {
      buildingName,
      NowTime,
      showMap,
      selectAll,
      alarmSum,
      mostElectricity,
      electricityLeast,
      deviceCount,
      compareElectricity,
      buildingElectricityList,
      regionElectricity,
      alarmInfo,
      mapList,
      pieChart1,
      alarmTypeChart,
      buildList,
      tableData,
      showCurve,
      valueList: [120, 200, 150, 80, 70, 110, 130],
      timeList: [120, 200, 150, 80, 70, 110, 130],
      fullscreenName,
      handleCurve,
      handlefullScreen,
      handleCloseTotalEnergy,
      handletabnaviga,
      closeInfoWindow,
      handle_details,
      handleRadio,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/cityIndex.css";
@import "../../assets/fonts/icomoon.css";
@import "../../assets/css/common.css";
@import "../../assets/css/home1.less";

.header_box_content {
  width: 100%;
}

.realTimeAlarm {
  width: 30%;
}

&:deep(.el_table) {
  background: none;
}

&:deep(.el-input__inner) {
  background: rgba(243, 243, 243, 0) !important;
}

&:deep(.el-select-dropdown__item) {
  padding-left: 20px !important;
}

&:deep(.el-tabs__item) {
  color: #fff !important;
}

&:deep(.el-tabs--border-card) {
  background-color: #f5f7fa00;
  border-bottom: 1px solid #dfdfe042;
}

&:deep(.el-tabs--border-card > .el-tabs__header) {
  background-color: #f5f7fa00;
  border-bottom: 1px solid #dfdfe042;
}

&:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  background-color: #9797974d;
  border-right-color: #97979700;
  border-left-color: #97979700;
}

&:deep(.el-tabs--border-card) {
  border: 0px solid #dcdfe6;
}

&:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}

&:deep(.el-table tbody tr:hover > td) {
  background-color: rgba(160, 151, 151, 0.37) !important;
}

&:deep(.el-table td, .el-table th.is-leaf) {
  border-bottom: 1px solid #dfdfe042;
}

&:deep(.el-table::before) {
  background-color: #081832 !important;
}

&:deep(.inputDemo input) {
  border: 0;
}

&:deep(.CorporateRankings input) {
  border: 0;
  color: #fff;
}

&:deep(.el-table th) {
  background-color: #081832 !important;
}

&:deep(.el-table th.is-leaf) {
  border-bottom: 1px solid #dfdfe042;
}

&:deep(.inputDemo input) {
  color: #fff;
}

&:deep(.el-table .cell) {
  white-space: pre-line;
}

&:deep(.el-table__empty-block) {
  background: rgb(0 12 59);
}

.selectBack {
  width: 120px;
  padding: 10px 10px;
  top: 11px;
}

&:deep(.el-radio__label) {
  color: #fff;
}
</style>
